<template>
  <div id="root">
    <!-- 背景图片定位-->
    <div class="background">
      <img src="./assert/beijing.jpg" alt />
    </div>

    <!-- 机会次数-->
    <div class="change">
      <span>你还有{{number}}次机会</span>
    </div>
    <!-- 中奖信息-->
    <div class="jiangpin" >
      <!-- 开始抽奖 -->
      <div class="zhizhen" @click="clicks" :style="{transform:rotate_deg}" ><img :src="imgurl" alt=""   /></div>
      <div :class="['jiangpin'+(index+1)]" v-for="(item,index) in list" :key="index">
        <img :src="item.Image" alt="" />
        <span>{{item.pre_name}}</span>
      </div>
      <div :class="isactive?'pop':'pop1'">
        <img src="./assert/zhongjiang.png" alt="">
        <div class="content"><span>{{msg}}</span></div>
        <div class="fooers" @click="handle">
          <span >朕知道了</span>
        </div>
      </div>
    </div>

  
<!--下面的内容去区域 -->
    <div class="biaoti">
        <!-- 中奖记录 -->
      <img src="./assert/baioti.png" alt="" />
      <span>中奖记录</span>

    <!-- 循环滚动中将泪列表 -->
    <div class="loop"> 
      <div class="loop_item"  v-for="(index) in 20" :key="index">
       <div class="loop_item_left"> 
        <div class="loop_item-left_right">
          <img src="./assert/user.png" alt="">
        <span class="loop_item-left_right1">123456789</span>
        <span class="loop_item-left_right2">2021/1/12</span>
        </div>
        
        </div>

        <span class="loop_item_right">iphonex</span>
      </div>
      
    </div>


       <img class="img1" src="./assert/baioti.png" alt="" />
      <span class="img2" >活动规则</span>
    

<!-- 最下面的规则 -->
<div class="footer">

  <span>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span>
</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data(){
  return {
    imgurl:require('./assert/zhizhen.png'),
    isactive:false,//中奖弹出
    number:10,//还有次数机会
    speed:20,//定义初始速度
    isAllowClick:true,//可以被被点击
    rotate_deg:0,//将要旋转的角度
    rotate_start:0,
    msg:'',
    list:[]
   
  }
  },


mounted(){
  this.list=[
    {
      id:1,
      pre_name:'八等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:2,
      pre_name:'一等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:3,
      pre_name:'二等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:4,
      pre_name:'三等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:5,
      pre_name:'四等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:6,
      pre_name:'五等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:7,
      pre_name:'六等奖',
      Image:require('./assert/zhongjiang.png')
    },
     {
        id:8,
      pre_name:'七等奖',
      Image:require('./assert/zhongjiang.png')
    }
  ]
},
  methods:{

    clicks(){
      if(this.isAllowClick==true){
       this.move()
        this.isAllowClick=false
      }
    },
    move(){
    
	   	var randomDeg = Math.ceil(Math.random() * 8);
    let select  = randomDeg*45+ Math.ceil(Math.random() * 1)*360
    console.log(select);

    let dada=Math.ceil(Math.random() * 1)*360
  console.log(dada);
  			if(this.number!==0){
          this.number--
           let timer=setInterval(()=>{

        this.rotate_start +=15
        this.rotate_deg = "rotate(" + this.rotate_start + "deg)";	 

     if( this.rotate_start==select){
       
         clearInterval(timer)
         this.rotate_start=0
         
         }
     
        let timera=setTimeout(()=>{
       if(select==405){
        this.isactive=true
        this.msg="恭喜你一等奖"
      } else if(select==450){
        this.isactive=true
        this.msg="恭喜你二等奖"
      } else if(select==495){
        this.isactive=true
        this.msg="恭喜你三等奖"
      } else if(select==540){
        this.isactive=true
        this.msg="恭喜你四等奖"
      } else if(select==585){
        this.isactive=true
        this.msg="恭喜你五等奖"
      } else if(select==630){
        this.isactive=true
        this.msg="恭喜你六等奖"
      } else if(select==675){
        this.isactive=true
        this.msg="恭喜你七等奖"
      } else if(select==720){
        this.isactive=true
        this.msg="恭喜你八等奖"
      }

      clearTimeout(timera)
    },1200)
       
         
        
      },this.speed)
        }else if(this.number==0){
          this.isactive=true
          this.msg="没有机会了"
        }
      
    

    
    
        
      },
    handle(){
      this.isactive=!this.isactive
      this.isAllowClick=true
    }
    
    },
    
  }

</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
}
.background {
  position: relative;

  img {
    display: block;
    width: 100vw;
    height: 100%;
  }
}
.change {
  position: absolute;
  width: 100vw;
  height: 50px;

  text-align: center;
  line-height: 50px;
  margin: 0 auto;
  top: 143px;
  span {
    display: block;
    font-size: 16px;
    color: black;
  }
}

.jiangpin {
  position: absolute;
  width: 100vw;
  height: 360px;
  // background: rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  top: 190px;
  .jiangpin1 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 146px;
    top: 23px;
    text-align: center;
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin2 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 221px;
    top: 61px;
    text-align: center;
    transform: rotate(43deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin3 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 259px;
    top: 135px;
    text-align: center;
    transform: rotate(90deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin4 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 220px;
    top: 211px;
    text-align: center;
    transform: rotate(134deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin5 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 146px;
    top: 238px;
    text-align: center;
    transform: rotate(180deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin6 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 71px;
    top: 210px;
    text-align: center;
    transform: rotate(228deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin7 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 34px;
    top: 136px;
    text-align: center;
    transform: rotate(273deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .jiangpin8 {
    position: absolute;
    width: 80px;
    height: 80px;
    // border: 1px solid red;
    left: 72px;
    top: 58px;
    text-align: center;
    transform: rotate(312deg);
    img {
      display: block;
      width: 71px;
      height: 33.75px;
      margin-top: 6.75px;
      margin-left: 3.75px;
    }
    span {
      display: block;
      margin-top: 5.75px;
    }
  }
  .zhizhen {
    position: absolute;
    width: 110px;
    height: 110px;
    left: 134px;
    top: 125px;
    text-align: center;

    img {
      display: block;
      width: 110px;
      height: 110px;
    }
  }

.pop1{
  display: none;
}
  .pop{
    position: absolute;
    width: 80vw;
    height: 350px;
    background: #ffff;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 9px;
    img{
      // position: absolute;
      display: block;
      width: 50vw;
      height: 100px;
      margin: 0 auto;
      margin-top: 30px;
    }
    .content{
      position: relative;
      width: 50vw;
      height: 60px;
      // background: red;

      margin: 0 auto;
      margin-top: 50px;
      span{
       position: absolute;
        display: block;
        margin: 0 auto;
        text-align: center;
        top: 20px;
        margin-left: 8vw;
        font-size: 20px;
        // color: #ffff;
        color: black;
        

        // background: rgb(255, 217, 178);
      }
    }
    .fooers{
      width: 60vw;
      height: 30px;
      background: #ffb264;
      margin:0 auto;
      margin-top: 180px;
      border-radius: 5px;
      span{
        display: block;
        width: 30vw;
        height: 20px;
      color:black;
      font-size: 16px;
      margin: 0 auto;
      text-align: center;
      margin-top: -130px;
       

      }
    }
  }
}

.biaoti {
  position: relative;
  width: 100vw;
  height: 525px;
  background: #ffb264;
  text-align: center;
  img {
    display: block;
    width: 120px;
    height: 25px;
    margin: 0 auto;
    background: rgb(255, 236, 217);
    border-radius: 9px;
  }
  span {
    display: block;
    font-size: 14px;
    color: black;
    font-weight: bold;
    margin: 0 auto;
    margin-top: -25px;
  }

  .loop{
  position: absolute;
  width: 80vw;
  height: 300px;
  background: rgb(255, 217, 178);
  margin: 0 auto ;
  top: 38px;
  left: 0;
  right: 0;
  border-radius: 9px;
   overflow: hidden;
   

  .loop_item{
    width: 79vw;
    height: 50px;
    // border: 1px solid red;
    margin: 0 auto;
    
   margin-top: 15px;
   animation: example 15s  linear infinite  ;
   
  
   .loop_item_left{
     width: 40vw;
     height: 50px;
    //  border: 1px solid black;
     margin-left: 0px;
     .loop_item-left_right{
       width: 13vw;
       height: 50px;
      //  border: 1px solid blue;

       border-radius:14px;
      img{
        width: 13vw;
        height: 50px;
        display: block;
        border-radius: 8px;
      }
      .loop_item-left_right1{
        display: block;
        width: 26vw;
        height: 25px;
        // border: 1px solid pink;
        margin-top: -49px;
        margin-left: 50px;
      }
      .loop_item-left_right2{
         display: block;
        width: 26vw;
        height: 25px;
        // border: 1px solid pink;
        margin-top: 0.375px;
        margin-left: 50px;
      }
     }
   }

   .loop_item_right{
     display: block;
      width: 40vw;
     height: 20px;
    //  border: 1px solid black;
    margin-right: -39px;
    margin-top: -37.5px;
    
   }
   
  }
  
}

.img1{
    display: block;
    width: 120px;
    height: 25px;
    margin: 0 auto;
    background: rgb(255, 236, 217);
    border-radius: 9px;
    margin-top:330px;
  }
  .img2 {
    display: block;
    font-size: 14px;
    color: black;
    font-weight: bold;
    margin: 0 auto;
    margin-top: -23px;
  }

  .footer{
   position: absolute;
  width: 80vw;
  height: 88px;
  background: rgb(255, 217, 178);
  margin: 0 auto ;
  top: 394px;
  left: 0;
  right: 0;
  border-radius: 9px;

  span{
    display: block;
    font-size: 14px;
    color: black;
    margin: 0 auto;
    margin-top: 18px;
    margin-left: 8px;
    margin-right: 8px;

  }
  }
}

@keyframes example {
  0%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(-300px);
  }

 
  
}




</style>
